<template>
  <div class="myClass">
    <!-- 引入搜索框 -->
    <class-input></class-input>
    <!-- 引入分类 -->
    <class-list></class-list>

    <footer-tab></footer-tab>
  </div>
</template>

<script>
import classInput from "@/compcenter/classInput.vue";
import classList from "@/compcenter/classList.vue";

import footerTab from '@/components/onionFooter.vue'

import { get } from "@/utils/http";
import { mapState } from "vuex";

export default {
  data() {
    return {};
  },
  components: {
    classInput,
    classList,
    footerTab
  },
  computed: {
    ...mapState(["classify"]),
  },
  methods: {
    init() {
      get("api/category").then((response) => {
        let res = response.data.data;
        // console.log(res);
        let arr = [];
        res.forEach((item) => {
          let obj = {};
          obj.id = item.id;
          obj.pic = item.pic;
          obj.name = item.cate_name;
          obj.children = item.children;
          arr.push(obj);
          // console.log(arr, "arr");
        });
        this.$store.dispatch("classify/setProductListAsync", arr);
      });
    },
  },
  created() {
    this.init();
  },
};
</script>